<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/" + "MFController/";
%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
		pageContext.setAttribute("APP_PATH_USER", request.getContextPath()+"/user");
		pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<meta charset="utf-8">
<title>米孚管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
	content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
<meta name="author" content="Muhammad Usman">

<!-- The styles -->
<link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">

<link href="css/charisma-app.css" rel="stylesheet">
<link href='bower_components/fullcalendar/dist/fullcalendar.css'
	rel='stylesheet'>
<link href='bower_components/fullcalendar/dist/fullcalendar.print.css'
	rel='stylesheet' media='print'>
<link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
<link href='bower_components/colorbox/example3/colorbox.css'
	rel='stylesheet'>
<link href='bower_components/responsive-tables/responsive-tables.css'
	rel='stylesheet'>
<link
	href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css'
	rel='stylesheet'>
<link href='css/jquery.noty.css' rel='stylesheet'>
<link href='css/noty_theme_default.css' rel='stylesheet'>
<link href='css/elfinder.min.css' rel='stylesheet'>
<link href='css/elfinder.theme.css' rel='stylesheet'>
<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>
<link href='css/animate.min.css' rel='stylesheet'>

<!-- jQuery -->
<script src="bower_components/jquery/jquery.min.js"></script>

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- The fav icon -->
<link rel="shortcut icon" href="img/favicon.ico">

</head>

<body>
	<!-- topbar starts -->
	<div class="navbar navbar-default" role="navigation">

		<div class="navbar-inner">
			<button type="button" class="navbar-toggle pull-left animated flip">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="form.jsp"> <img alt="Charisma Logo"
				src="img/logo20.png" class="hidden-xs" /> <span>米孚管理</span></a>

			<!-- user dropdown starts -->
			<div class="btn-group pull-right">
				<button class="btn btn-default dropdown-toggle"
					data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i><span
						class="hidden-sm hidden-xs"> admin</span> <span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a>个人信息</a></li>
					<li class="divider"></li>
					<li><a  id="log_out_a"  >登出</a></li>
				</ul>
			</div>
			<!-- user dropdown ends -->

			<!-- theme selector starts -->
			<div class="btn-group pull-right theme-container animated tada">
				<button class="btn btn-default dropdown-toggle"
					data-toggle="dropdown">
					<i class="glyphicon glyphicon-tint"></i><span
						class="hidden-sm hidden-xs"> 更改主题 / Skin</span> <span
						class="caret"></span>
				</button>
				<ul class="dropdown-menu" id="themes">
					<li><a data-value="classic"><i class="whitespace"></i>
							Classic</a></li>
					<li><a data-value="cerulean"><i class="whitespace"></i>
							Cerulean</a></li>
					<li><a data-value="cyborg"><i class="whitespace"></i>
							Cyborg</a></li>
					<li><a data-value="simplex"><i class="whitespace"></i>
							Simplex</a></li>
					<li><a data-value="darkly"><i class="whitespace"></i>
							Darkly</a></li>
					<li><a data-value="lumen"><i class="whitespace"></i>
							Lumen</a></li>
					<li><a data-value="slate"><i class="whitespace"></i>
							Slate</a></li>
					<li><a data-value="spacelab"><i class="whitespace"></i>
							Spacelab</a></li>
					<li><a data-value="united"><i class="whitespace"></i>
							United</a></li>
				</ul>
			</div>
			<!-- theme selector ends -->


		</div>
	</div>
	<!-- topbar ends -->
	<div class="ch-container">
		<div class="row">

			<!-- left menu starts -->
			<div class="col-sm-2 col-lg-2">
				<div class="sidebar-nav">
					<div class="nav-canvas">
						<div class="nav-sm nav nav-stacked"></div>
						<ul class="nav nav-pills nav-stacked main-menu">
							<li class="nav-header">主要</li>

							<li><a class="ajax-link" href="form.jsp"><i
									class="glyphicon glyphicon-edit"></i><span> 图片/音乐上传</span></a></li>


							<li><a class="ajax-link" href="gallery.jsp"><i
									class="glyphicon glyphicon-picture"></i><span> 图片/音乐查看</span></a></li>

							<li><a class="ajax-link" href="${pageContext.request.contextPath }/UserServlet"><i
									class="glyphicon glyphicon-align-justify"></i><span>
										用户管理</span></a></li>


						</ul>

					</div>
				</div>
			</div>
			<!--/span-->
			<!-- left menu ends -->

			<noscript>
				<div class="alert alert-block col-md-12">
					<h4 class="alert-heading">Warning!</h4>

					<p>
						You need to have <a href="http://en.wikipedia.org/wiki/JavaScript"
							target="_blank">JavaScript</a> enabled to use this site.
					</p>
				</div>
			</noscript>

			<div id="content" class="col-lg-10 col-sm-10">
				<!-- content starts -->
				<div>
					<ul class="breadcrumb">
						<li><a>主要</a></li>
						<li><a>图片/音乐上传</a></li>
					</ul>
				</div>


				<div class="row">
					<div class="box col-md-12">
						<div class="box-inner">
							<div class="box-header well" data-original-title="">
								<h2>
									<i class="glyphicon glyphicon-edit"></i> 上传图片/音乐
								</h2>

								<div class="box-icon">
									<a class="btn btn-setting btn-round btn-default"><i
										class="glyphicon glyphicon-cog"></i></a> <a
										class="btn btn-minimize btn-round btn-default"><i
										class="glyphicon glyphicon-chevron-up"></i></a> <a
										class="btn btn-close btn-round btn-default"><i
										class="glyphicon glyphicon-remove"></i></a>
								</div>
							</div>
							<div class="box-content">
								<!--图片上传文件form开始  action="${APP_PATH }/FileDispatcher/upload"-->
								<form id="formUpload" role="form" method="post"
									enctype="multipart/form-data">
									<div class="form-group">
										<label for="title" id="titlelabel">图片名字</label> <input type="text"
											class="form-control" id="title" name="title"
											placeholder="图片名字" required>
									</div>
									<div class="form-group">
										<label  for="intro"  id="introlabel">简介</label> <input type="text"
											class="form-control" id="intro" name="intro" placeholder="简介">
									</div>

									<div class="form-group">
										<label for="detalis" id="detalislabel">详情</label>
										<textarea class="form-control" id="detalis" name="detalis"
											placeholder="图片详情"></textarea>
									</div>

									<div class="form-group">
										<label for="builder">建立者</label> <input type="text"
											class="form-control" id="builder" name="builder"
											placeholder="建立者">
									</div>

									<div class="form-group">
										<label for="pictype" id="pictypelabel">图片类型</label> 
											<select  class="form-control" id="pictype" name="pictype">
											<option value="动漫">动漫</option>
											<option value="清新">清新</option>
											<option value="风景">风景</option>
											<option value="简约">简约</option>
											<option value="唯美">唯美</option>
											
										</select>
									</div>


									<div class="form-group">
										<label for="imageFile" id="imageFilelabel">选择上传图片</label> <input type="file"
											name="image" id="imageFile" required>
									</div>

									<div class="form-group" id="musicnameDiv" style="display:none">
										<label for="musicname">音乐名</label> <input type="text"
											class="form-control" id="musicname" name="musicname"
											placeholder="音乐名" required>
									</div>

									<div id="musicDiv" class="form-group" style="display:none">
										<label for="musicFile">选择上传音乐</label> <input type="file"
											name="music" id="musicFile" required>
									</div>

									<div class="checkbox">
										<label> <input type="checkbox" id="musicCheck">
											上传音乐
										</label>
									</div>
									<button id="btnsubmit" type="button" class="btn btn-default">上传</button>
								</form>

							</div>
						</div>
					</div>
					<!--/span-->

				</div>
				<!--/row-->

				<!-- content ends -->
			</div>
			<!--/#content.col-md-0-->
		</div>
		<!--/fluid-row-->

		<hr>

		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">

			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">×</button>
						<h3>设置</h3>
					</div>
					<div class="modal-body">
						<p>这里空空如也...</p>
					</div>
					<div class="modal-footer">
						<a class="btn btn-default" data-dismiss="modal">关闭</a> <a
							class="btn btn-primary" data-dismiss="modal">保存更改</a>
					</div>
				</div>
			</div>
		</div>

		<footer class="row">
		<p class="col-md-9 col-sm-9 col-xs-12 copyright">
			&copy; <a target="_blank">墨雨 </a> 莲带两色，一色为之生，一色为之死……
		</p>

		<p class="col-md-3 col-sm-3 col-xs-12 powered-by">
			Powered by: <a>墨雨</a>
		</p>
		</footer>


	</div>
	<!--/.fluid-container-->

	<!-- external javascript -->

	<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

	<!-- library for cookie management -->
	<script src="js/jquery.cookie.js"></script>
	<!-- calender plugin -->
	<script src='bower_components/moment/min/moment.min.js'></script>
	<script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
	<!-- data table plugin -->
	<script src='js/jquery.dataTables.min.js'></script>

	<!-- select or dropdown enhancer -->
	<script src="bower_components/chosen/chosen.jquery.min.js"></script>
	<!-- plugin for gallery image view -->
	<script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
	<!-- notification plugin -->
	<script src="js/jquery.noty.js"></script>
	<!-- library for making tables responsive -->
	<script src="bower_components/responsive-tables/responsive-tables.js"></script>
	<!-- tour plugin -->
	<script
		src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
	<!-- star rating plugin -->
	<script src="js/jquery.raty.min.js"></script>
	<!-- for iOS style toggle switch -->
	<script src="js/jquery.iphone.toggle.js"></script>
	<!-- autogrowing textarea plugin -->
	<script src="js/jquery.autogrow-textarea.js"></script>
	<!-- multiple file upload plugin -->
	<script src="js/jquery.uploadify-3.1.min.js"></script>
	<!-- history.js for cross-browser state change on ajax -->
	<script src="js/jquery.history.js"></script>
	<!-- application script for Charisma demo -->
	<script src="js/charisma.js"></script>

	<script src="js/picture-music-upload.js"></script>


	<script src="js/jquery.form.js"></script>
	<script>
	
	
		function ajaxSubmitForm() {
			var option = {
				url : '${APP_PATH}/FileDispatcher/upload',
				type : 'POST',
				dataType : 'json',
				headers : {
					"ClientCallMode" : "ajax"
				}, //添加请求头部
				success : function(data) {
					console.log(data);
					if ("100" == data.code) {
						alert("上传成功");
					} else {
						alert("上传失败");
						return;
					}
				},
				error : function(data) {
					alert("上传失败");
				}
			};
			$("#formUpload").ajaxSubmit(option);
			return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交
		}
	
		$(function() {
			$("#btnsubmit").click(function() {
				ajaxSubmitForm();
			})
		})
		
					$("#log_out_a").click(function(){
				    $.ajax({
			        url: "${APP_PATH_USER}/logout",
			        type: "POST",
			        dataType : 'json',
			        success: function(result) {
				        	console.log(result);
				        	       	alert("已登出");
				        	     	 window.location.replace("${basePath}login.jsp");
					     }
			    });
			});
	</script>

</body>

</html>